<template>
    <div class="main-layout">
        <!-- <common-aside class="aside"/> -->
        <div class="main-content">
            <!-- <common-header class="header" /> -->
            <div class="content">
                <div class="left">
                    <div class="my-backlog">
                        <my-backlog />
                    </div>
                    <div class="backlog-list">
                        <backlog-list />
                    </div>
                </div>
                <div class="middle">
                    <get-notice />
                </div>
                <div class="right">
                    <div class="per-infor">
                        <per-infor />
                    </div>
                    <div class="pie-board">
                        <pie-board />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import PieBoard from '@/views/backlog/components/PieBoard.vue';
import MyBacklog from '@/views/backlog/components/MyBacklog.vue';
import BacklogList from '@/views/backlog/components/BacklogList.vue';
import PerInfor from '@/views/backlog/components/PerInfor.vue';
import GetNotice from './components/GetNotice.vue';
import request from '@/utils/http';
</script>

<style scoped>
.main-layout {
    display: flex;
    width: 1650px;
    height: 963px;
}

.aside {
    width: 264px;
    height: 963px;
    background: #2d3a4b;
    position: relative;
    left: 0;
}

.main-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.header {
    height: 117px;
    width: 100%;
    background: #fff;
}

.content {
    height: 963px;
    width: 100%;
    background: #F6F8FC;
    padding: 24px;
    display: flex;
    justify-content: space-around;
}

.backlog-list {
    margin-top: 50px;
}

.right {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
}

.pie-board {
    padding: 0;
}

.middle {
    margin-top: 60px;
}
</style>